<template>
  <cl-crud ref="crud" @load="onLoad">
    <cl-pagefull>
      <template #head>
        <el-row type="flex">
          <cl-filter-group v-model="search">
            <cl-filter label="事业部">
              <cl-select v-model="search.biz_id" placeholder="请选择" filterable @change="changeBiz">
                <el-option v-for="item in business" :key="item.biz_id" :label="item.biz_name" :value="item.biz_id" />
              </cl-select>
            </cl-filter>
            <cl-filter label="门店">
              <cl-shop-select v-model="search.dept_id" filterable clearable show-all :biz_id="search.biz_id"
                style="width: 100%" />
            </cl-filter>
            <cl-filter label="医院汇总">
              <cl-select clearable v-model="search.show_hospital" style="width: 100%">
                <el-option :value="1" label="是" />
                <el-option :value="0" label="否" />
              </cl-select>
            </cl-filter>
            <cl-filter label="财务">
              <cl-select v-model="search.user_id" filterable collapse-tags>
                <el-option v-for="item in userList" :key="item.user_id" :label="item.user_name" :value="item.user_id" />
              </cl-select></cl-filter>
            <cl-filter label="是否有未消耗金额">
              <cl-select clearable v-model="search.has_on_cost" style="width: 100%">
                <el-option :value="1" label="有" />
                <el-option :value="0" label="无" />
              </cl-select>
            </cl-filter>
            <cl-filter label="是否结算">
              <cl-select clearable v-model="search.is_clost" style="width: 100%">
                <el-option :value="1" label="已结算" />
                <el-option :value="0" label="未结算" />
              </cl-select>
            </cl-filter>
            <cl-filter label="汇总日期">
              <cl-date-picker v-model="search.timeList" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd" :clearable="false" style="width: 210px" />
            </cl-filter>
            <cl-filter label="订单号">
              <el-input v-model="search.order_no" placeholder="请输入订单号" clearable style="width: 200px" />
            </cl-filter>
            <cl-filter label="会员">
              <el-input v-model="search.cus_name" placeholder="请输入会员" clearable style="width: 200px" />
            </cl-filter>
            <cl-filter label="核对否">
              <cl-select clearable v-model="search.is_check" style="width: 100%">
                <el-option :value="1" label="已核对" />
                <el-option :value="0" label="未核对" />
              </cl-select>
            </cl-filter>
            <cl-filter label="结算单号">
              <el-input v-model="search.close_no" placeholder="请输入结算单号" clearable style="width: 200px" />
            </cl-filter>
          </cl-filter-group>
          <div>
            <el-button @click="exportFile" size="small">
              <icon-svg name="icon-download-3" />
            </el-button>
          </div>
        </el-row>
        <el-row>
          <el-button type="primary" :disabled="!selectedRows.length" @click="chekcList">结算</el-button>
          <el-button type="primary" @click="openAdd">新增</el-button>
        </el-row>
      </template>

      <!-- 数据表格 -->
      <el-row>
        <cl-table v-bind="tableProp" @selection-change="handleSelectionChange">
          <!-- <template #column-payeeFn="{ scope: { row } }">
            {{ payeeFn(row) }}
          </template> -->
          <template #column-is_check="{ scope: { row } }">
            <el-tag :type="row.is_check == 1 ? 'success' : 'danger'">{{ row.is_check == 1 ? '已核对' : '未核对' }}</el-tag>
          </template>
          <template #column-images="{ scope: { row } }">
            <div style="display: flex;align-items: center; cursor: pointer;" @click="openImages(row)">
              <span v-if="row.images.length" style="margin-right: 5px;">+{{ row.images.length }}</span>
              <div>
                <template v-for="(item, index) in row.images.slice(0, 3)">
                  <el-image :key="index" style="width: 50px; height: 50px ;margin-left: 5px;" :src="item"></el-image>
                </template>
              </div>
            </div>

          </template>
          <template #column-opt="{ scope: { row } }">
            <div style="display: flex;">
              <el-button type="primary" @click="edit(row)">编辑</el-button>
              <template v-if="!row.is_close">
                <el-button :type="row.is_check == 0 ? 'danger' : 'success'" @click="checkFn(row, row.is_check)">{{
                  row.is_check == 0 ?
                    '核对' : '未核对' }}</el-button>
              </template>
              <el-dropdown size="medium" trigger="click" @command="(cmd) => handlerCommand(cmd, row)">
                <el-button>
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1" v-if="!row.is_close">
                    <span style="height: 30px;display: block;"> 修改收款</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="2">
                    <span style="height: 30px;display: block;"> 订单详情</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="3">
                    <span style="height: 30px;display: block;"> 分配方案</span>
                  </el-dropdown-item>
                  <!---->
                  <el-dropdown-item command="4" v-if="row.is_adjusted == 1">
                    <span style="height: 30px;display: block;"> 删除</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

          </template>
        </cl-table>
      </el-row>
      <template slot="foot">
        <el-row type="flex">
          <cl-flex1 />
          <!-- 分页控件 -->
          <cl-pagination :props="{
            pageSizes: [50, 100, 500, 1000],
          }" />
        </el-row>
      </template>
    </cl-pagefull>
    <EditDialog ref="editDialogRef" @successed="refresh" />
    <el-dialog title="结算" :visible.sync="dialogVisible" width="30%">
      <span>是否结算勾选的账单</span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :laoding="saveLoading">确 定</el-button>
      </span>
    </el-dialog>
    <AddDialog ref="addDialogRef" @successed="refresh" />
    <EditModifyPaymentMethod ref="editModifyPaymentMethodRef" @successed="refresh" />
    <FpDetailList ref="fpDetailListRef" />
    <ImagesListDialog ref="imagesListDialogRef" />
  </cl-crud>
</template>

<script>
import ImagesListDialog from '@/views/reconciliation/settlementList/components/imagesListDialog.vue'
import dayjs from "dayjs";
import AddDialog from "./components/addDialog.vue";
import EditDialog from "./components/editDialog.vue";
import EditModifyPaymentMethod from "./components/editModifyPaymentMethod.vue";
import FpDetailList from "./components/fpDetailList.vue";
import pageMinix from "@/mixins/page";
import { exportExcelCoustom } from "@/utils/excel";
export default {
  name: 'reconciliationDetailsList',
  mixins: [pageMinix],
  inject: ["$layout"],
  components: {
    EditDialog, AddDialog, EditModifyPaymentMethod, FpDetailList, ImagesListDialog
  },
  data() {
    return {
      dialogVisible: false,
      saveLoading: false,
      tableProp: {
        "context-menu": ["refresh"],

        columns: [
          {
            label: "",
            type: "selection",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },

          {
            label: "到店日期",
            prop: "appoint_date",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "付款(退款)日期",
            prop: "pay_date",
            minWidth: 120,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "门店",
            prop: "dept_name",
            minWidth: 150,
            align: "center",
            showOverflowTooltip: true
          },
          {
            label: "会员",
            prop: "cus_name",
            minWidth: 150,
            align: "center",
            showOverflowTooltip: true
          },
          {
            label: "订单号",
            prop: "order_no",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "消费项目",
            prop: "projects",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "消费金额",
            prop: "pay_amount",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "收款金额",
            prop: "real_amount",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "收款方",
            prop: "payee_name",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "收款账户",
            prop: "bank_account_name",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "收款账号",
            prop: "bank_account",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "未消耗金额",
            prop: "no_cost",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "合作分成方式",
            prop: "allocation_name",
            minWidth: 120,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "分成金额",
            prop: "our_deserved",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "应收金额/应付金额",
            prop: "debt",
            minWidth: 160,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "备注",
            prop: "remark",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          }, {
            label: "图片",
            prop: "images",
            width: 250,
            align: "left",
          },
          {
            label: "结算单",
            prop: "close_no",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "结算日期",
            prop: "close_date",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "是否核算",
            prop: "is_check",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          // {
          //   label: "付款日期",
          //   prop: "close_date",
          //   minWidth: 100,
          //   align: "left",
          //   showOverflowTooltip: true
          // },
          { label: "操作", prop: "opt", width: 220, fixed: "right", disable: true }
        ]
      },
      search: {
        timeList: [dayjs().subtract(1, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')],
        biz_id: "",
        size: 50,
        show_hospital: 0
      },
      selectedRows: [],
      userList: [],
      skList: []
    };
  },
  created() {
    this.search.biz_id = this.getCurrBiz();
    this.getUserList(this.search.biz_id);
    this.getBizRefShop(this.search.biz_id);
  },
  mounted() { },
  methods: {
    openImages(row) {
      this.$refs.imagesListDialogRef.open(this.$TOOL.objCopy(row))
    },
    async exportFile() {
      let arr = []
      this.tableProp.columns.forEach(item => {
        if (item.prop && item.prop != 'opt') {
          arr.push(item)
        }
      })
      let res = await this.$service.reconciliation.orderList({ ...this.search, no_page: 1 })
      exportExcelCoustom("对账明细", res, arr);
    },
    handlerCommand(type, row) {
      if (type == '1') {
        this.editSkFn(row)
      }
      if (type == '2') {
        this.$layout.openCusDetail({ ...row, cus_status: 1 }, 'order');
      }
      if (type == '3') {
        this.$refs.fpDetailListRef.open(this.$TOOL.objCopy(row));
      }
      if (type == '4') {
        console.log();

        this.$alert('是否删除', '提示', {
          confirmButtonText: '确定', cancelButtonText: '取消',
          callback: async () => {
            await this.$service.reconciliation.orderDel({ id: row.id })
            this.$message.success('删除成功');
            this.$refs.crud.refresh()
          }
        });
      }
    },
    editSkFn(row) {
      this.$refs.editModifyPaymentMethodRef.open(this.$TOOL.objCopy(row));
    },

    async getUserList(biz_id) {
      const data = await this.$service.user.deptuserlists({
        biz_id,
        post: 5,
        manage_user: 1
      });
      this.userList = data;
    },
    onLoad({ ctx, app }) {
      ctx.service(this.$service.reconciliation)
        .set("dict", {
          api: {
            page: "orderList"
          }
        })
        .done();
      app.refresh(this.search);
    },
    openAdd() {
      this.$refs.addDialogRef.open();
    },
    edit(row) {
      this.$refs.editDialogRef.open(this.$TOOL.objCopy(row));
    },
    checkFn(row) {

      this.$service.reconciliation.orderCheck({ id: row.id }).then(res => {
        this.$message.success("操作成功");
        this.$refs.crud.refresh()
      })
    },
    payeeFn(row) {
      switch (row.payee) {
        case 1:
          return row.our_deserved;
          break;
        case 2:
          return row.another_deserved;
          break;
        case 3:
          return row.others_deserved;
          break;
      }
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    chekcList() {
      console.log("选中的数据:", this.selectedRows);
      if (this.selectedRows.map(item => item.id).length == 0) {
        return this.$message.warning("请选择要结算的账单");
      }
      this.dialogVisible = true;
    },
    refresh() {
      const refresh = this.$refs.crud.refresh;
      refresh && refresh({ page: 1, ...this.search });
    },
    async confirm() {
      try {
        this.saveLoading = true;
        let ids = this.selectedRows.map(item => item.id);
        await this.$service.reconciliation.orderClose({ id: ids });
        this.dialogVisible = false
        this.refresh();
      } catch (error) {
        this.saveLoading = false;
      }
    }
  }
};
</script>
<style scoped lang="scss"></style>
